<template>
  <div class="mainCon">
    <div class="mainConHeader">
      <div class="mainConHeaderContent"></div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.id"
          v-for="item in list"
          :key="item.id"
        ></el-tab-pane>
      </el-tabs>
      <es-case-list
        :activeName="activeName"
        myResponsibleHS="true"
      ></es-case-list>
    </div>
  </div>
</template>
<script>
import EsCaseList from './esCaseList.vue'
export default {
  name: 'hsMyResponsibleTab',
  components: {
    EsCaseList,
  },
  data() {
    return {
      activeName: 'SCAN',
      list: [
        {
          id: 'SCAN',
          label: '扫码投诉',
        },
        {
          id: 'PLAT',
          label: '根治欠薪平台',
        },
        {
          id: 'LABOR',
          label: '劳保大厅',
        },
        {
          id: 'HOTLINE',
          label: '市长热线',
        },
        {
          id: 'PETITION',
          label: '省阳光信访',
        },
      ],
      status: '',
    }
  },
  created() {},
  mounted() {
    //返回到当前tab栏
    switch (this.$route.query.activeName) {
      case 'SCAN':
        this.activeName = 'SCAN'
        break
      case 'PLAT':
        this.activeName = 'PLAT'
        break
      case 'LABOR':
        this.activeName = 'LABOR'
        break
      case 'HOTLINE':
        this.activeName = 'HOTLINE'
        break
      case 'PETITION':
        this.activeName = 'PETITION'
        break
      default:
        this.activeName = 'SCAN'
        break
    }
    return this.activeName
  },
  methods: {
    //tabs栏切换
    handleClick(e) {
      this.activeName = e.name
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 132px;
  padding: 0;
  &Header {
    position: relative;
    &Content {
      position: absolute;
      left: 130px;
      z-index: 100;
      font-size: 12px;
      color: #666666;
    }
  }
  .topConStyle {
    margin: 0 !important;
  }
}
</style>
